<script setup lang="ts">
import {TabeConfig} from "../type.d"
import { ref } from 'vue'

const props = defineProps<TabeConfig>()

</script>

<style scope>
.bigTable dev {
  border: 1px solid rgb(0, 0, 0);
  color: #909399;
  font-weight: 500;
}
.bigTable {
  scrollbar-width: 10px;
  scrollbar-base-color: green;
  scrollbar-track-color: red;
  scrollbar-arrow-color: blue;
}
.bigTable .table-head {
  color: #909399;
  font-weight: 700;
  overflow-x: hidden;
  width: calc(100% - 10px);
}

.scroll-box {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  /* border: 1px solid rgb(0, 0, 0); */
}
.scroll-box-head {
  background-color: #f8f8f9;
}

.scroll-box-head .is-line {
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 14px;
  height: 100%;
  text-align: center;
  z-index: 1;
  cursor: col-resize;
}

.scroll-head {
  padding: 12px 0;
  display: inline-block;
  vertical-align: middle;
  color: #606266;
}
.scroll-head span {
  white-space: pre-line;
  word-break: break-all;
  font-variant: tabular-nums;
  font-feature-settings: "tnum";
}

.scroll-data {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.scroll-item {
  border: 1px solid #f8f8f9;
  height: 30px;
  width: 100%;
  overflow: hidden;
}
.scroll-item .scroll-col {
  /* height:30px; */
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 0;
  white-space: nowrap;
}

.scroll-col-check {
  text-align: center;
}

.scroll-item:hover {
  width: 100%;
  background: rgb(104, 111, 211);
  color: #fff;
}
.level_1 {
  font-weight: 700;
}

.bigTable ::-webkit-scrollbar {
  width: 8px;
  height: 5px;
  opacity: 0.2;
}

.bigTable ::-webkit-scrollbar-thumb {
  background: #ccc; /**滑块颜色*/
  border-radius: 5px; /**滑块圆角*/
}
</style>

<template>
  <div style="width: 100%" class="bigTable">
    <div class="table-head" id="bigTableHead">
      <div class="scroll-box-head" :style="`width:${tableWidth}px;`">
        <slot name="check">
          <div style="width: 50px" class="scroll-head scroll-col-check">
            <span>选择</span>
          </div>
        </slot>
        <slot name=”head“>
          <div v-for="col in $options.columns" :key="col.name" :style="`width: ${col.width}px`" class="scroll-head">

            <span v-show="!showSearch">{{ col.title }}</span>
            <template v-if="col.isSearch">
              <span v-show="showSearch"><el-input @clear="showSearch = false" clearable :placeholder="`输入${col.searchPlaceholder || col.title}精确搜索`" v-model="queryObj[col.name]" size="mini" style="width:80%"><el-button slot="append" icon="el-icon-search"
                             @click.stop="searchEvent(1)"></el-button></el-input></span>
              <i v-show="!showSearch" @click.stop="showSearch = true" class="el-icon-search" title="搜索" style="font-size: 16px;margin-left: 5px; cursor: pointer;color: #68b92e;" size="mini"></i>
            </template>
          </div>
        </slot>
      </div>
    </div>
    <div ref="demo" class="scroll-box demo" :style="`height: ${showNumber * itemHeight + 10}px;`" @scroll.stop="scrollEvent">
      <div class="scroll-blank" :style="`width:${tableWidth - 20}px;height: ${
          allDataNumber * itemHeight
        }px;min-height:300px;`">
        <span v-show="activeList.length===0">暂无数据</span>
      </div>
      <div class="scroll-data" :style="`top: ${positionTop}px;width:${tableWidth - 20}px;`" v-loading="loading">
        <div v-for="item in activeList" :key="item[$options.rowKey]" class="scroll-item">
          <div style="width: 50px" class="scroll-col scroll-col-check">
            <el-checkbox :indeterminate="item[$options.indeterminateKey]" v-model="item[$options.checkKey]" @change="(val) => checkEvent(item, val)"></el-checkbox>
          </div>
          <template v-for="(col, index) in $options.columns">
            <div v-if="col.isTreeNode" :key="col.name" :style="`width:${col.width}px; cursor: pointer`" class="scroll-col" @click.stop="colClickEvent(item)">
              <span :style="`padding-left: ${
                  item[$options.leafKey]
                    ? item.Level * 15 - 5
                    : item.Level * 15 - 15
                }px;`" :class="{ level_1: item.Level === 1 }">
                <i class="arrow" :class="
                    item.isExpand
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-right'
                  " v-if="!item[$options.leafKey]" @click.stop="toggleExpand(item)"></i>
              </span>
              <span v-if="col.formatterHtml" v-html="col.formatterHtml(item)"></span>
              <span v-else-if="col.formatter">{{col.formatter(item) }}</span>
              <span v-else> {{item[col.name]}}</span>
            </div>
            <div v-else :key="index" :style="`width:${col.width}px;`" class="scroll-col" :title="item[col.name]">
              <span v-if="col.formatterHtml" v-html="col.formatterHtml(item)"></span>
              <span v-else-if="col.formatter">{{col.formatter(item) }}</span>
              <span v-else> {{item[col.name]}}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 部件查询部分 -->
    <template v-if="hasSearch">
      <el-dialog title="搜索结果" :visible.sync="showSerchDialog" :show-close='false' :close-on-click-modal='false' append-to-body>
        <div style="overflow: auto;width:100%">
          <div class="table-head search" :style="`width:${tableWidth}px;`">
            <div class="scroll-box-head">
              <slot name="check">
                <div style="width: 50px" class="scroll-head scroll-col-check">
                  <span>选择</span>
                </div>
              </slot>
              <slot name=”head“>
                <div v-for="col in $options.columns" :key="col.name" :style="`width: ${col.width}px`" class="scroll-head search">
                  <span v-if="col.isSearch"><el-input clearable :placeholder="`输入${col.searchPlaceholder || col.title}精确搜索`" v-model="queryObj[col.name]" size="mini" style="width:80%"><el-button slot="append" icon="el-icon-search" @click.stop="searchEvent(2)"></el-button></el-input></span>
                  <span v-else>{{ col.title }}</span>
                </div>
              </slot>
            </div>
          </div>

          <div class="scroll-data-search" :style="`width:${tableWidth}px;height: ${searchData.length * itemHeight}px;min-height:200px;`">
            <div v-for="item in searchData" :key="item[$options.rowKey]" class="scroll-item">
              <div style="width: 50px" class="scroll-col scroll-col-check">
                <el-checkbox :indeterminate="item[$options.indeterminateKey]" v-model="item[$options.checkKey]" @change="(val) => checkEvent(item, val)"></el-checkbox>
              </div>
              <template v-for="(col, index) in $options.columns">
                <div v-if="col.isTreeNode" :key="col.name" :style="`width:${col.width}px;`" class="scroll-col">
                  <span :style="`padding-left: ${
                  item[$options.leafKey]
                    ? item.Level * 15 - 5
                    : item.Level * 15 - 15
                }px;`" :class="{ level_1: item.Level === 1 }">
                    <i class="arrow el-icon-caret-bottom" v-if="!item[$options.leafKey]"></i>
                    {{ item.NodeName }}({{ item.NodeCode }})
                  </span>
                </div>
                <div v-else :key="index" :style="`width:${col.width}px;`" class="scroll-col" :title="item[col.name]">
                  {{ item[col.name] }}
                </div>
              </template>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="serchDialogSave">确 定</el-button>
          <el-button size="small" @click="serchDialogCancel">取 消</el-button>
        </span>
      </el-dialog>
    </template>

  </div>
</template>
